<!DOCTYPE html>
<html lang="zh - CN">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale = 1.0">
    <title>用户注册与列表展示</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        form {
            margin-bottom: 20px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        table,
        th,
        td {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>用户注册</h2>
        <form>
            <label for="username">用户名：</label>
            <input type="text" id="username" v-model="newUser.username" required><br>
            <label for="password">密码：</label>
            <input type="password" id="password" v-model="newUser.password" required><br>
            <label for="confirmPassword">确认密码：</label>
            <input type="password" id="confirmPassword" v-model="newUser.confirmPassword" required><br>
            <label for="nickname">昵称：</label>
            <input type="text" id="nickname" v-model="newUser.nickname" required><br>
            <label for="gender">性别：</label>
            <input type="radio" id="male" value="男" v-model="newUser.gender">男
            <input type="radio" id="female" value="女" v-model="newUser.gender">女<br>



            <label for="province">所属城市（三级联动）：</label>
            <select v-model="newUser.province">
                <option v-for="(province, index) in provinces" :key="index" :value="province">{{ province.name }}
                </option>
            </select>
            <select v-model="newUser.city" :disabled="!newUser.province">
                <option v-for="(city, index) in getCities(newUser.province)" :key="index" :value="city">{{ city.name }}
                </option>
            </select>
            <select v-model="newUser.district" :disabled="!newUser.city">
                <option v-for="(district, index) in getDistricts(newUser.city)" :key="index" :value="district">{{
                    district.name }}</option>
            </select><br>




            <label for="hobbies">兴趣爱好：</label>
            <input type="checkbox" id="hobby1" value="爬山旅游" v-model="newUser.hobbies">爬山旅游
            <input type="checkbox" id="hobby2" value="看书" v-model="newUser.hobbies">看书
            <input type="checkbox" id="hobby3" value="看星星" v-model="newUser.hobbies">看星星<br>
            <button type="button" @click="register">提交</button>
        </form>
        <h2>用户列表</h2>
        <table>
            <thead>
                <tr>
                    <th>用户名</th>
                    <th>昵称</th>
                    <th>性别</th>
                    <th>所属城市</th>
                    <th>兴趣爱好</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(user, index) in userList" :key="index">
                    <td>{{ user.username }}</td>
                    <td>{{ user.nickname }}</td>
                    <td>{{ user.gender }}</td>
                    <td>{{ user.province.name }} - {{ user.city.name }} - {{ user.district.name }}</td>
                    <td>{{ user.hobbies.join(', ') }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                newUser: {
                    username: '',
                    password: '',
                    confirmPassword: '',
                    nickname: '',
                    gender: '',
                    province: null,
                    city: null,
                    district: null,
                    hobbies: []
                },
                userList: [],
                provinces: [
                    {
                        name: '北京',
                        cities: [
                            {
                                name: '北京市区',
                                districts: [
                                    { name: '东城区' },
                                    { name: '西城区' }
                                ]
                            },
                            {
                                name: '郊区',
                                districts: [
                                    { name: '延庆区' },
                                    { name: '密云区' }
                                ]
                            }
                        ]
                    },
                    {
                        name: '上海',
                        cities: [
                            {
                                name: '上海市区',
                                districts: [
                                    { name: '黄浦区' },
                                    { name: '徐汇区' }
                                ]
                            },
                            {
                                name: '周边',
                                districts: [
                                    { name: '浦东新区郊区' },
                                    { name: '青浦区' }
                                ]
                            }
                        ]
                    }
                ]
            },
            methods: {
                register() {
                    if (this.newUser.password === this.newUser.confirmPassword) {
                        this.userList.push({ ...this.newUser });
                        this.newUser = {
                            username: '',
                            password: '',
                            confirmPassword: '',
                            nickname: '',
                            gender: '',
                            province: null,
                            city: null,
                            district: null,
                            hobbies: []
                        };
                    } else {
                        alert('密码和确认密码不一致');
                    }
                },
                getCities(province) {
                    return province ? province.cities : [];
                },
                getDistricts(city) {
                    return city ? city.districts : [];
                }
            }
        });
    </script>
</body>

</html>